<template>
  <section class="component letter-print">

    <!-- 信函模板选择 -->
    <el-form :model="model" ref="form" inline label-width="75px">
      <el-form-item label="逾期阶段">
        <el-input v-model="overduePeriod" disabled></el-input>
      </el-form-item>
      <el-form-item label="模板名称" prop="templateId" :rules="{required: true, message: '请选择模板', trigger: 'blur'}">
        <el-select v-model="model.templateId" placeholder="请选择" clearable @change="onTemplateChange">
          <el-option v-for="item in templateSet" :key="item.id" :label="item.templateName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    
    <div class="operate-buttons">
      <el-button @click="close()">取消</el-button>
      <el-button @click="submit()">打印</el-button>
    </div>

  </section>
</template>


<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component';
import { Dependencies } from '~/core/decorator';
import { Emit, Prop, Model} from 'vue-property-decorator';
import { State, namespace } from "vuex-class";
import DataBox from "~/components/common/data-box.vue";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { TemplateService } from '~/services/domain-service/template.service';
import { KeyResource } from '~/components/template-manage/letter-template/letter-template.config'
import { CommonService } from "~/utils/common.service";
const CollectionExecutionModule = namespace('collection-execution');

@Component({
  components: {
    
  }
})
export default class LetterPrint extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Dependencies(TemplateService)
  private templateService: TemplateService
  @CollectionExecutionModule.State
  private caseId: string


  private templateSet: any[] = []

  private data: any = null

  private templateContent: any = ''
  // 最终要打印的内容
  private printContent: any = ''
  private printPageHeight: number = 0

  private model: any = {
    overduePeriod: '',
    templateId: '',
  }

  private dialog: any = {
    printPreview: false,
  }

  private get overduePeriod() {
    if (this.data) {
      return 'N' + this.data.overduePeriod
    } 
    return null
  }

  public refreshData() {
    const form: any = this.$refs['form']
    form.resetFields()
    this.loadingData()
    this.printPageHeight = this.getPrintPageHeight()
  }

  @Emit('close')
  private close() {}

  private loadingData() {
    this.caseOperatorPageService.queryCaseInfo(this.caseId).subscribe(
      data => {
        this.data = data
        if (data.overduePeriod) {
          const temp: string = Number.parseInt(data.overduePeriod) >= 37 ? 'N37' : 'N' + data.overduePeriod
          this.onOverduePeriodChange(temp)
        }
      }
    );
  }

  /**
   * 逾期阶段改变
   */
  private onOverduePeriodChange(overduePeriod: string) {
    if (overduePeriod) {
      this.templateService.getTemplateByOverduePeriod({overduePeriod, templateCategory: 'LETTER'}).subscribe(
        data => this.templateSet = data || []
      )
    }
  }

  /**
   * 模板改变
   */
  private onTemplateChange(templateId: string) {
    let templateContent: string = ''
    if (templateId) {
      const template: any = this.templateSet.find(v => v.id === templateId)
      templateContent = template.templateContent
    }
    this.model.templateId = templateId
    // 处理预览的数据
    this.templatePreview(templateContent)
    // 处理要打印的数据
    let contentStr: any = ''
    let batchContent = `<div style="width:100%;height:${this.printPageHeight}px">` + templateContent + '</div>'
    KeyResource.forEach(v => {
      const tempValue = v.value.substr(1)
      batchContent = batchContent.replace(new RegExp('\\' + v.value, 'g'), this.data[tempValue])
    })
    contentStr += batchContent
    this.printContent = contentStr
    
  }

  /**
   * 预览数据处理
   */
  private templatePreview(templateContent: any) {
    let val: any = templateContent
    KeyResource.forEach(v => {
      val = val.replace(new RegExp('\\' + v.value, 'g'), '_____________')
    })
    this.templateContent = val
  }

  /**
   * 一键打印
   */
  private submit() {
    const form: any = this.$refs['form']
    form.validate(v => {
      if (!v) return
      const nWindow: any = window.open('.')
      nWindow.document.write(this.printContent)
      nWindow.print()
      nWindow.close()
    })
  }

  /**
   * 打印页高度
   */
  private getPrintPageHeight() {
    const type: any = CommonService.getBrowserType()
    let printPageHeight: number = 0
    switch(type) {
      case 'chrome':
      case 'opera':
        printPageHeight = 1025
        break
      case '360':
        printPageHeight = 1015
        break
      case 'firefox':
        printPageHeight = 1050
        break
      default:
        break
    }
    return printPageHeight
  }

}
</script>

<style lang="less" scoped>
.component.letter-print {
  .print-preview {
    border: solid 1px gray;
    padding: 50px 20px; // margin: 20px 15%;
    height: 297mm;
    width: 210mm;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
  }
}
</style>


